<template>
    <div>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-s-shop"></i> 
        活动管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>秒杀管理</el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
        <div style="width: 100%; font-size: 20px; font-weight: 700;">
            <i class="el-icon-arrow-left" @click="goback"></i>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="排序" >
    <el-input v-model="ruleForm.sort" :keyup="ruleForm.sort=ruleForm.sort.replace(/\D/g,'')" style="width: 400px;"></el-input>
    <p style="font-size: 13px; color: red;">数字越小,排名越靠前,默认排序为创建时间</p>
  </el-form-item>
  <el-form-item label="选择商品" prop="region">
    <div style="display: flex;">
        <el-input disabled v-model="ruleForm.region" style="width: 400px;"></el-input><el-button @click="opensp">选择商品</el-button>
    </div>
 <!-- 选择商品弹出框 -->
 <el-dialog title="选择商品" :modal="false" :visible.sync="dialogTableVisible">
    <div class="spsearch">
    <p>药品名称</p>
    <el-input v-model="input" :keyup="input=input.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 50%;" ></el-input>
    <el-button size="small" style="padding: 13px 12px; "  @click="onsearch" >搜索</el-button>
  </div>
  <el-table :data="shops"  height="300px">
    <el-table-column width="500" label="商品">
      <template slot-scope="scope">
        <div class="msj_shoplist">
          <div class="msj_shoplist_img">
            <img :src="scope.row.img" alt="">
          </div>
          <span>{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="scope">
        <el-button :type="scope.row.id==xuan.id?'danger':'primary'" @click="handel(scope.row)" style="padding: 5px;" size="small">{{scope.row.id==xuan.id?'取消':'选择'}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="width: 100%; padding: 10px 0; display: flex; justify-content: center;">
    <el-button type="primary"   size="small" @click="onbaocun">保存</el-button>
    <el-button   size="small" @click="quxiao">取消</el-button>
  
  </div>
</el-dialog>
<!-- 遮罩层 -->
<div class="zhezhao" v-show="dialogTableVisible">
</div>

  </el-form-item>
  <el-form-item label="所属会场" required>
    <el-select v-model="ruleForm.sshuhuichang" >
      <el-option :label="item.huiname" v-for="(item,index) in huichang" :key="index"  :value="item.huiname"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="分类" required>
    <el-select v-model="ruleForm.fenleis" >
      <el-option :label="item.fltitles" v-for="(item,index) in fenlei" :key="index"  :value="item.fltitles"></el-option>
    </el-select>
</el-form-item>
  <el-form-item label="原价" prop="type">
    <el-input  v-model="ruleForm.type"  :keyup="ruleForm.type=ruleForm.type.replace(/[^\d.]/g,'')" style="width: 200px;"></el-input><el-button>元</el-button>
  </el-form-item>

  <el-form-item label="库存" prop="resource">
    <el-input  v-model="ruleForm.resource" :keyup="ruleForm.resource=ruleForm.resource.replace(/\D/g,'')" style="width: 200px;"></el-input>
  </el-form-item>

  <el-form-item label="详情" prop="desc">
    <el-input type="textarea" :keyup="ruleForm.desc=ruleForm.resource.replace(/\s+/g, '')"  v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button @click="resetForm()">返回商品列表</el-button>
  </el-form-item>
</el-form>
    </div>
    </div>
</template>

<script>
import {getZwyShopListBx,getmsjhuichang,getmsjmsfenlei,addmsjhuichangshops,msjsethuichangshops} from '../../../utils/api'
export default {
    name: 'PhaemacyAddhuicshops',
    data() {
        return {
            breadcrumb:'添加商品',
            ruleForm: {
                sort: '',
          region: '',
          sshuhuichang:'',
          fenleis:'',      
          type: '',
          resource: '',
          desc: ''
        },
        dialogTableVisible:false,
        rules: {
          region: [
            { required: true, message: '请选择商品', trigger: 'change' }
          ],
          type: [
            {  required: true, message: '请填写原价', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请填写库存', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写详情', trigger: 'blur' }
          ]
        },
        shops:[],
        huichang:[],
        fenlei:[],
        input:'',
        xuan:{},
        datas:{},
        };
    },
    created(){
        let  data=this.$route.params.data?this.$route.params:JSON.parse(sessionStorage.getItem('addmsjhuicshops')) 
        this.shopslist()
        this.datas=data
        getmsjhuichang().then(res=>{
            this.huichang=res.data.data.filter(v=>v.state=='1')
            this.ruleForm.sshuhuichang=data.isadd?this.huichang[0].huiname:data.data.sshuhuichang
        })
        getmsjmsfenlei().then(res=>{
            this.fenlei=res.data.data.filter(v=>v.state=='1')
            this.ruleForm.fenleis=data.isadd?this.fenlei[0].fltitles:data.data.fenlei
        })
        this.ruleForm.sort=data.isadd?'':data.data.sorts
        this.ruleForm.type=data.isadd?'':data.data.prices.oldprice
        this.ruleForm.resource=data.isadd?'':data.data.kucuninfo.split('/')[2]
    },
    mounted() {
   
        
        
    },

    methods: {
        // 返回 
        goback(){
            this.$router.push({
                name:'seconds',
                params:{
                    curr:1
                }
            })
            
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let spinfos={
              img:this.xuan.img,
              name:this.xuan.name,
            }
            if(isNaN(this.ruleForm.type)){
              this.$message.error('请填写正确的数字')
            }else{
                let pri={
                newprice:'1.00',
                oldprice:Number(this.ruleForm.type).toFixed(2),
                }
                let obj={
                spinfo:JSON.stringify(spinfos),
                sorts:this.ruleForm.sort==''?'0':this.ruleForm.sort,
                fenlei:this.ruleForm.fenleis,
                sshuhuichang:this.ruleForm.sshuhuichang,
                kucuninfo:`0/0/${this.ruleForm.resource}`,
                times:this.datas.isadd?new Date().toLocaleString().replaceAll('/','-'):this.datas.data.times,
                prices:JSON.stringify(pri),
            }
            console.log(obj);
            (this.datas.isadd?addmsjhuichangshops(obj):msjsethuichangshops({id:this.datas.data.id,...obj})).then(res=>{
                this.$message.success(res.data.msg)
                this.goback()
            })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
       this.goback()
      },
       // 获取所有 商品 查找商品 
       shopslist(){
        getZwyShopListBx().then(res=>{
        let data=res.data.data
        if(this.datas.isadd==0){
            this.xuan=data.find(item=>item.name==this.datas.data.spinfo.name)||this.datas.data.spinfo
            this.ruleForm.region=this.datas.data.spinfo.name
        }
        this.shops=this.input==''?data:data.filter(item=>item.name.includes(this.input))
      })
      },
      // 打开商品弹出框 
      opensp(){
        this.dialogTableVisible=true
      },
      // 选择 取消商品 
      handel(v){
        this.xuan=v.id==this.xuan.id?{}:v
      },
      // 搜索商品
      onsearch(){
        this.shopslist()
      },
      // 关闭商品弹出框 
      quxiao(){
        this.dialogTableVisible=false
      },
      // 保存
      onbaocun(){

        let flag=JSON.stringify(this.xuan)
        if(flag=='{}'){
          this.$message.error('请选择商品')
        }else{
          this.ruleForm.region=this.xuan.name
          this.quxiao()
        }
      },
    },
};
</script>

<style  scoped>
    *{
        margin: 0;
    }
    .el-form-item{
        margin-bottom: 20px;
    }

    .zhezhao{
  width: 100%;
  height: 100vh;
  background: #333;
  z-index: 999;
  opacity: 0.5;
  position: fixed;
  top: 0; left: 0;
}
.spsearch{
  width: 100%;
  display: flex; align-items: center;
}
.spsearch p{
  width: 100px;
  text-align: center;
}
.msj_shoplist{
  display: flex; align-items: center;
  font-size: 14px;
}
.msj_shoplist span{
  display: inline-block;
  width: 100%; text-align: center;
}
.msj_shoplist_img{
  width: 150px; box-sizing: border-box;
  padding: 0 15px;
}
.msj_shoplist_img img{
  width: 50px;
}
.msj_author{
  width: 80px; margin: 5px 0 0;
  height: 80px;
  background: #eee;
  color: #ccc;
  font-size: 20px;
  display: flex; position: relative;
  justify-content: center;
  align-items: center;
}
.msj_author img{
  width: 100%;
  height: 100%;
}
</style>